<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: #6ff;
        }
    </style>
</head>

<body>
    <div id="box" class="one two three" title="hello" style="" data-index="0" data-msg="1111" asd="asd">
        <span>11111</span>
    </div>
</body>
<script>

    // 元素节点的属性(特性)
    // 1. 所有的节点都是对象类型  -> html元素(元素节点)  -> 对象类型
    // 2. 对象是对一个或一类事物特征(属性)和行为(方法)的描述  -> html元素也有自身的属性和方法 (语法:Element.xxx) 

    // 元素节点的属性: 元素本身携带的属性(内置属性 特性)


    var div = document.querySelector("div");
    // console.log(div, typeof div);

    console.dir(div); // 以键值对形式打印对象(html元素)


    // 通用
    // innerHTML   获取和设置元素内的html结构(html + text)
    // innerText   获取和设置元素内的文本结构(text)
    // textContent  获取和设置元素内的文本结构(text)
    // console.log(div.innerHTML);
    // console.log(div.innerText);
    // console.log(div.textContent);

    // outerHTML   获取和设置元素本身及其内内部的html结构
    // outerText    获取和设置元素本身及其内内部的text结构

    // console.log(div.outerHTML);
    // div.outerHTML = "11111";
    // console.log(div.outerText);

    // id   获取和设置元素的id名
    // console.log(div.id);
    // div.id = "box";

    // className    获取和设置元素的class名(字符串 多个class名空格分隔)
    // console.log(div.className);
    // div.className = "one two three";

    // classList   获取class名列表的集合
    // console.log(div.classList);


    // title  获取和设置元素的title属性
    // console.log(div.title);
    // div.title = "hello";



    // dataset  获取和设置元素data-系列的自定义属性
    // console.log(div.dataset);
    // console.log(div.dataset.index);
    // console.log(div.dataset.msg);

    // div.dataset.index = 1;
    // div.dataset.msg = 2222;

    // tagName  获取元素的标签名(大写字符串)
    console.log(div.tagName);  // "DIV"


    // style    获取和设置元素行内样式
    // console.log(div.style);  // 返回一个css属性的对象(获取内联)
    // console.log(div.style.width);  // 返回一个css属性的对象(获取内联)
    // console.log(div.style.height);  // 返回一个css属性的对象(获取内联)

    //  (JS操作元素改变样式 都是通过行内样式实现的)
    // div.style.width = "400px";
    // div.style.height = "400px";
    // div.style.backgroundColor = "red";


    console.log(div);






</script>

</html>